<template>
  <div>
    <v-container fluid>
      <v-row>
        <v-col v-for="card in cards" :key="card.title" :cols="flex" >
          <Card :card="card"/>
        </v-col>
      </v-row>
    </v-container>
    <div class="nodata" v-if="cards[0] == undefined">
      <v-img
        :src="imgUrl"
        :lazy-src="imgUrl"
        aspect-ratio="1"
        class="grey lighten-2 img"
        width="300"
        height="300"
      >
      </v-img>
      <div class="text">暂无数据</div>
    </div>
  </div>
</template>

<script>
import api from "../../axios/api";
import Card from "../../components/categoryListCard.vue"
export default {
  data: () => {
    return {
      datas: null,
      flex: 12,
      cards: [],
      imgUrl: require("@/assets/nodata.gif"),
    };
  },
  components: {Card},
  mounted: function () {
    api
      .getWorksByTypeId({ typeId: this.$route.params.typeId })
      .then((res) => {
        this.cards = res.data.datas;
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script>

<style scoped>
.tab_item {
  width: 100%;
}

.nodata {
  width: 100%;
}
.img {
  margin: 0 auto;
}

.text {
  text-align: center;
}
</style>